<template>
    <div>
        <div class="config">
            <p>实名制认证</p>
        </div>

        <span>当前等级为:联合创始人</span>

        <div class="info">
            <div class="fl">真实姓名</div>
            <input type="text" class="fr" v-model="name">
        </div>
        <div class="info">
            <div class="fl">身份证号</div>
            <input type="text" class="fr" v-model="c_num">
        </div>
        <div class="info">
            <div class="fl">手机号(登录账号)</div>
            <input type="number" class="fr" v-model="p_num">
        </div>
        <div class="info">
            <div class="fl">手机验证码</div>
            <input type="number" v-model="s_num" style="width:15%;padding-right:0px">
            <button class="yzm" @click="code()" id="yzm">获取验证码</button>

        </div>
        <div class="info">
            <div class="fl">登录密码</div>
            <input type="password" class="fr" v-model="pwd">
        </div>
        <div class="info">
            <div class="fl">再次输入登录密码</div>
            <input type="password" class="fr" v-model="repassword">
        </div>
        <div class="info">
            <div class="fl">性别</div>
            <select name="" id="" style="float:right" v-model="sex">
                <option value="1">男</option>
                <option value="0">女</option>
            </select>
        </div>
        <div class="info">
            <div class="fl">年龄</div>
            <input type="number" class="fr" v-model="age">
        </div>
        <div class="info">
            <div class="fl">地址</div>
            <input type="text" class="fr" v-model="address">
        </div>
        <div class="info">
            <div class="fl">开户银行</div>
            <input type="text" class="fr" v-model="bank">
        </div>
        <div class="info">
            <div class="fl">银行卡号</div>
            <input type="text" class="fr" v-model="b_num">
        </div>
        <div class="info">
            <div class="fl">支付宝账号</div>
            <input type="text" class="fr" v-model="alipay">
        </div>
        <div class="info">
            <div class="fl">微信账号</div>
            <input type="text" class="fr" v-model="wechat">
        </div>
        <div class="photo">
            <div class="text">身份证正面</div>
            <input type="file" class="file" @change="change1()" id="file1" name="file">
            <div class="addfile">
                <img src="../assets/images/add.png" alt="" class="img" id="img1">

            </div>
        </div>
        <div class="photo">
            <div class="text">身份证反面</div>
            <input type="file" class="file" @change="change2()" id="file2" name="file">
            <div class="addfile">
                <img src="../assets/images/add.png" alt="" class="img" id="img2">

            </div>
        </div>

        <div class="btn" @click="ok()">
            <button>提交审核</button>
        </div>

    </div>
</template>

<script>
export default {
    name: "realName",
    data() {
        return {
            name: "",
            p_num: "",
            c_num: "",
            age: "",
            bank: "",
            b_num: "",
            alipay: "",
            wechat: "",
            sex: 1,
            info: "",
            state: 0,
            uid: "",
            certificate_url: "",
            certificate_back_url: "",
            encode: "",
            s_num: "",
            pwd: "",
            repassword: "",
            address:""
        };
    },
    beforeCreate() {
        document.getElementsByTagName("body")[0].style.background = "#fff";
    },
    methods: {
        ok() {
            var myreg = /^[1][3,4,5,7,8][0-9]{9}$/;
            var isIDCard=/^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/;

            if (this.name == "") {
                this.$Message.warning("真实姓名不能为空");
            } else if (this.c_num == "") {
                this.$Message.warning("身份证号不能为空");
            } else if (!isIDCard.test(this.c_num)) {
                this.$Message.warning("请填写正确的身份证号");
            } else if (this.p_num == "") {
                this.$Message.warning("手机号不能为空");
            } else if (!myreg.test(this.p_num)) {
                this.$Message.error("请填写正确的手机号");
            } else if (this.s_num == "") {
                this.$Message.warning("验证码不能为空");
            } else if (this.pwd == "") {
                this.$Message.warning("密码不能为空");
            } else if (this.repassword == "") {
                this.$Message.warning("再次输入密码不能为空");
            } else if (this.age == "") {
                this.$Message.warning("年龄不能为空");
            }else if (this.address == "") {
                this.$Message.warning("地址不能为空");
            } else if (this.bank == "") {
                this.$Message.warning("开户行不能为空");
            } else if (this.b_num == "") {
                this.$Message.warning("银行卡号不能为空");
            } else if (this.alipay == "") {
                this.$Message.warning("支付宝账号不能为空");
            } else if (this.wechat == "") {
                this.$Message.warning("微信账号不能为空");
            } else if (document.getElementById("file1").files[0] == undefined) {
                this.$Message.warning("身份证正面不能为空");
            } else if (document.getElementById("file2").files[0] == undefined) {
                this.$Message.warning("身份证反面不能为空");
            } else {
                var param = new FormData();

                param.append("name", this.name);
                param.append("p_num", this.p_num);
                param.append("s_num", this.s_num);
                param.append("password", this.pwd);
                param.append("repassword", this.repassword);
                param.append("age", this.age);
                param.append("address", this.address);
                param.append("sex", this.sex);
                param.append("bank", this.bank);
                param.append("b_num", this.b_num);
                param.append("c_num", this.c_num);
                param.append("alipay", this.alipay);
                param.append("wechat", this.wechat);
                param.append("encode", this.encode);
                param.append("file", document.getElementById("file1").files[0]);
                param.append("file", document.getElementById("file2").files[0]);
                this.$Spin.show({
                    render: h => {
                        return h("div", [
                            h("Icon", {
                                class: "demo-spin-icon-load",
                                props: {
                                    type: "load-c",
                                    size: 18
                                }
                            }),
                            h("div", "Loading")
                        ]);
                    }
                });
                // 新用户添加
                this.axios({
                    method: "post",
                    url: `${this.siteUrl}/insertUser`,
                    data: param
                })
                    .then(response => {
                        if (response.data.result == 200) {
                      
                            this.$Spin.hide();
                            alert(
                                "等待后台审核，审核成功后,进入微信公众号进行登录"
                            );
                        } else {
                            this.$Spin.hide();
                            alert(response.data.message);
                        }
                    })
                    .catch(function(error) {
                        console.log(error);
                    });
            }
        },
        change1() {
            var file1 = document.getElementById("file1").files[0];
            var url = URL.createObjectURL(file1);
            document.getElementById("img1").src = url;
            document.getElementById("img1").style.width = "120px";
            document.getElementById("img1").style.height = "70px";
            document.getElementById("img1").style.marginTop = "0px";
        },
        change2() {
            var file2 = document.getElementById("file2").files[0];
            var url = URL.createObjectURL(file2);
            document.getElementById("img2").src = url;
            document.getElementById("img2").style.width = "120px";
            document.getElementById("img2").style.height = "70px";
            document.getElementById("img2").style.marginTop = "0px";
        },
        // 获取验证码
        code() {
            var myreg = /^[1][3,4,5,7,8][0-9]{9}$/;

            // 验证码倒计时
            if (this.p_num == "") {
                this.$Message.warning("手机号不能为空");
            } else if (!myreg.test(this.p_num)) {
                this.$Message.error("请填写正确的手机号");
            } else {
                var yzm = document.getElementById("yzm");
                var clock = "";
                var nums = 60;
                yzm.disabled = true; //将按钮置为不可点击
                yzm.style.backgroundColor = "#ccc";
                yzm.innerHTML = nums + "秒后可重新获取";
                clock = setInterval(doLoop, 1000); //一秒执行一次

                function doLoop() {
                    nums--;
                    if (nums > 0) {
                        yzm.innerHTML = nums + "秒后可重新获取";
                    } else {
                        clearInterval(clock); //清除js定时器
                        yzm.disabled = false;
                        yzm.style.backgroundColor = "#5aa0c8";
                        yzm.innerHTML = "点击发送验证码";
                        nums = 60; //重置时间
                    }
                }

                // 请求验证接口
                var qs = require("qs");
                this.axios({
                    method: "post",
                    url: `${this.siteUrl}/getSecretNumber`,
                    data: qs.stringify({
                        p_num: this.p_num
                    })
                })
                    .then(response => {
                        if (response.data.result == 200) {
                        } else {
                            this.$Message.warning(response.data.message);
                        }
                    })
                    .catch(function(error) {
                        console.log(error);
                    });
            }
        }
    },
    mounted() {
        var qs1 = require("qs");
        this.axios({
            method: "post",
            url: `${this.siteUrl}/getEncodeMessage`,
            data: qs1.stringify({
                higher_up: "",
                level: "1"
            })
        })
            .then(response => {
            
                if ((response.data.result = 200)) {
                    this.encode = response.data.data;
                } else {
                    alert("请求失败");
                }
            })
            .catch(function(error) {
                console.log(error);
            });

        this.$Message.config({
            top: 200,
            duration: 2
        });
    }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.info {
    height: 51px;
    background: #fff;
    line-height: 50px;
    padding-left: 10px;
    font-size: 14px;
    border-bottom: 1px solid #f2f2f2;
    position: relative;
}
.info input {
    text-align: right;
    padding-right: 10px;
    height: 50px;
    color: #666;
    border: none;
    outline: none;
}
.fl {
    width: 45%;
}
.fr {
    width: 55%;
}

.info select {
    height: 50px;
}
.photo {
    height: 90px;
    background: #fff;
    line-height: 50px;
    padding-left: 10px;
    font-size: 14px;
    border-bottom: 1px solid #f2f2f2;
    position: relative;
}
.photo .addfile {
    width: 120px;
    height: 70px;
    background: #ddd;
    position: absolute;
    right: 0px;
    top: 0px;
    margin: 10px;
    text-align: center;
}
.photo .addfile .img {
    width: 50px;
    margin-top: 10px;
}

.photo .file {
    width: 120px;
    height: 70px;
    position: absolute;
    right: 0px;
    top: 0px;
    margin: 10px;
    z-index: 555;
    opacity: 0;
}

.btn {
    width: 100%;
}

.btn button {
    width: 80%;
    height: 40px;
    background: #5aa0c8;
    border: none;
    color: #fff;
    outline: none;
    margin-left: 10%;
    margin-top: 50px;
    margin-bottom: 50px;
    border-radius: 5px;
}

.level {
    color: red;
    line-height: 30px;
    margin-left: 10px;
}

span {
    color: red;
    line-height: 30px;
    margin-left: 10px;
}
.yzm {
    background: #5aa0c8;
    text-align: center;
    height: 40px;
    line-height: 40px;
    color: #fff;
    border-radius: 5px;
    position: absolute;
    right: 10px;
    bottom: 5px;
    width: 35%;
    font-size: 13px;
    border: none;
}
</style>
